import React, {
    PureComponent
} from 'react';

import {
    View,
    StyleSheet
} from 'react-native';

import {
    Press,
    FastImage
} from './../../components';

import avatar_icon from './img/me_avater.png';


interface Props {
    url:string,
    size:number,
    style?:any,
    onPress?:Function
}

class Avatar extends PureComponent<Props> {

    static defaultProps = {
        size: 48,
        radius: true,
        gender: 0,
        vipNode:null,
        online: false,
        userWrap: false
    }

    get contentStyle() {
        const {
            size,
        } = this.props;
        const _styles = [];

        _styles.push({
            width: size,
            height: size,
            borderRadius:size/2
        })

        return _styles;
    }

    get containerStyle():any {
        const {
            style
        } = this.props;
        return [this.contentStyle,styles.container,style]
    }

    render() {
        const {
            url,
            children,
            onPress
        } = this.props;

        const _props:any = {
            style:this.containerStyle
        }

        if(!!onPress) {
            _props.onPress=onPress
        }

        const Wrapper:any = !!onPress?Press:View;

        return (
            <Wrapper {..._props}>
                <FastImage
                    url={url}
                    style={{flex:1}}
                    children={children}
                    defaultSource={avatar_icon}
                    defaultSourceStyle={styles.defaultImageStyle}
                />
            </Wrapper>
        )
    }
}

export default Avatar;

const styles = StyleSheet.create({
    container:{
        borderWidth:1,
        overflow:`hidden`,
        borderColor:`#eee`
    },
    defaultImageStyle:{
        width:`60%`,
        height:`60%`
    }
}) as any;